import React from 'react';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';
import {Result, List, WhiteSpace, Button, Modal} from 'antd-mobile';
import browserCookie from 'browser-cookies';
import {logoutSubmit} from "../../redux/user.redux";

@connect(
    state => state.user,
    {logoutSubmit}
)
class User extends React.Component {
    constructor(props) {
        super(props);
        this.logout = this.logout.bind(this);
    }

    logout() {
        const alert = Modal.alert;
        alert('注销', '确认退出登录吗', [
            {text: 'Cancel', onPress: () => console.log('cancel'), style: 'default'},
            {
                text: 'OK', onPress: () => {
                    browserCookie.erase('userid');
                    this.props.logoutSubmit();
                }
            }]);
    }

    render() {
        const props = this.props;
        const Item = List.Item;
        const Brief = Item.Brief;
        return props.user ? (
            <div>
                <Result
                    img={<img src={require(`../images/${this.props.avatar}.png`)} style={{width: '50px'}}
                              alt={this.props.avatar}/>}
                    title={this.props.user}
                    message={props.type === 'boss' ? props.company : null}
                />
                <List renderHeader={() => '简介'}>
                    <Item
                        multipleLine
                    >
                        {props.title}
                        {props.desc.split('\n').map(v=><Brief key={v}>{v}</Brief>)}
                        {props.money?<Brief>薪资:{props.money}</Brief>:null}
                    </Item>
                </List>
                <WhiteSpace/>

                <List>
                    <Button type='primary' onClick={this.logout}>退出登录</Button>
                </List>
            </div>
        ) : <Redirect to={props.redirectTo} />;
    }
}

export default User;